<template>
  <view class="page-container">
    <backView :back="goBack" />

    <view class="page-header">
      <text class="page-title">健康评估</text>
    </view>

    <view class="page-body space-y-[24rpx]">
      <HealthAssessmentSection
        :is-expanded="healthAssessmentExpanded"
        @toggle="toggleSection('healthAssessment')"
      />
      <SpecialistAssessmentSection
        :is-expanded="specialistAssessmentExpanded"
        @toggle="toggleSection('specialistAssessment')"
      />
      <HomeCareAssessmentSection />
      <HealthDemandAttributeSection
        :is-expanded="healthDemandAttributeExpanded"
        @toggle="toggleSection('healthDemandAttribute')"
      />
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import Taro from '@tarojs/taro'
import backView from '@/components/backView.vue'
import HealthAssessmentSection from '@/components/medical-record/HealthAssessmentSection.vue'
import SpecialistAssessmentSection from '@/components/medical-record/SpecialistAssessmentSection.vue'
import HomeCareAssessmentSection from '@/components/medical-record/HomeCareAssessmentSection.vue'
import HealthDemandAttributeSection from '@/components/medical-record/HealthDemandAttributeSection.vue'

const healthAssessmentExpanded = ref(true)
const specialistAssessmentExpanded = ref(true)
const healthDemandAttributeExpanded = ref(true)

const toggleSection = (section: 'healthAssessment' | 'specialistAssessment' | 'healthDemandAttribute') => {
  if (section === 'healthAssessment') {
    healthAssessmentExpanded.value = !healthAssessmentExpanded.value
  } else if (section === 'specialistAssessment') {
    specialistAssessmentExpanded.value = !specialistAssessmentExpanded.value
  } else {
    healthDemandAttributeExpanded.value = !healthDemandAttributeExpanded.value
  }
}

const goBack = () => {
  Taro.navigateBack()
}
</script>

<style scoped lang="scss">
.page-container {
  min-height: 100vh;
  width: 100%;
  max-width: 750rpx;
  margin: 0 auto;
  background-color: #f5f5f5;
  padding-bottom: 120rpx;
}

.page-header {
  background-color: #27c530;
  color: #fff;
  padding: 30rpx;
  border-bottom-left-radius: 20rpx;
  border-bottom-right-radius: 20rpx;
}

.page-title {
  font-size: 32rpx;
  font-weight: 700;
  text-align: center;
  display: block;
}

.page-body {
  padding: 24rpx;
  padding-bottom: 120rpx;
}
</style>

